import React, {FC, useEffect, useState} from 'react';
import styles from './Section03.module.scss'


interface Section03Props {
}

const projectInfoArr = [
    {
        name: 'pzy-easy-pro(自研基于Antd的后台模板)',
        link: 'https://gitee.com/free_pan/pzy-easy-pro#pzy-easy-pro'
    },
    {
        name: 'winter-swagger-ui(自研swagger主题)',
        link: 'https://gitee.com/free_pan/winter-swagger-ui'
    },
    {name: '基于TS的React项目模板(IE10+)', link: 'https://gitee.com/free_pan/create-react-app-ie10/tree/typescript/'},
    {
        name: '基于TS的React项目模板(IE10+, Bootstrap)',
        link: 'https://gitee.com/free_pan/create-react-app-ie10/tree/typescript-bootstrap/'
    },
    {
        name: '基于TS的React项目模板(IE11+, Antd)',
        link: 'https://gitee.com/free_pan/create-react-app-ie10/tree/typescript-antd/'
    }
]

const Section03: FC<Section03Props> = (props) => {
    const {children} = props;

    const [imgArr, setImgArr] = useState<HTMLElement[]>([]);
    useEffect(() => {
        console.log('Section03 组件挂载完毕!');
        // 浏览器窗口
        // let clientHeight = window.innerHeight;
        // let clientWidth = window.innerWidth;
        // const onScroll = () => {
        //     const imgArr = document.getElementsByClassName('lazy-img') as HTMLCollectionOf<HTMLImageElement>;
        //     Array.from(imgArr).map((item, idx) => {
        //         // 获取元素具体视窗的距离
        //         let {top, right, bottom, left} = item.getBoundingClientRect();
        //         if (!(top > clientHeight || bottom < 0 || left > clientWidth || right < 0)) {
        //             let src = item.getAttribute('data-src');
        //             item.src = src ? src : '';
        //             item.style.visibility = 'visible'
        //             item.style.marginTop = '-30px';
        //         }
        //     })
        // }
        // window.addEventListener('scroll', onScroll)
        // return () => {
        //     window.removeEventListener('scroll', onScroll)
        // }
    }, []);

    const onClick = (link: string) => {
        window.open(link, '_blank')
    }
    console.log('Section03 组件render!');
    return (
        <div className={styles.main}>
            <div className={'container'}>
                <h2>框架整合示例</h2>
                <div className={styles.demoBox}>
                    {/*<img className={'lazy-img'} data-src={demo01ImgPath}/>
                    <img className={'lazy-img'} data-src={demo02ImgPath}/>
                    <img className={'lazy-img'} data-src={demo03ImgPath}/>
                    <img className={'lazy-img'} data-src={demo04ImgPath}/>
                    <img className={'lazy-img'} data-src={demo05ImgPath}/>
                    <img className={'lazy-img'} data-src={demo06ImgPath}/>*/}
                    {projectInfoArr.map((item, idx) => {
                        return <div key={idx} onClick={() => onClick(item.link)}>{item.name}</div>
                    })}
                </div>
            </div>
        </div>
    );
};

export default Section03;
